<template>
  <view class="page">
    <view class="content">
      <view class="header yd-flex-h-hS-vC">
        <text class="title">物流信息</text>
        <text>顺丰快递（<text class="yellow">45435416541321</text>）</text>
      </view>
      <view class="step-box">
        <view class="step">
          <view class="step__left">
            <view class="step__circle auto">
              <image class="circle2" src="~@/static/order/circle2.png" />
            </view>
            <view class="step__line"></view>
          </view>
          <view class="step__right">
            <view class="step__time">2018-10-09  08:29 至 09:00</view>
            <view>[广州市] 正在派送中，感谢使用顺丰快递，期待再次为你服务</view>
          </view>
        </view>
        <view v-for="index in 10" :key="index" class="step">
          <view class="step__left">
            <view class="step__circle auto">
              <image class="circle1" src="~@/static/order/circle1.png" />
            </view>
            <view class="step__line"></view>
          </view>
          <view class="step__right">
            <view class="step__time">2018-10-09  08:29 至 09:00</view>
            <view>[广州市] 正在派送中，感谢使用顺丰快递，期待再次为你服务</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {

}
</script>

<style lang="scss">
.page {
  box-sizing: border-box;
  padding: 20rpx 20rpx 2rpx 20rpx;
}
.content {
  margin-bottom: 20rpx;
  background-color: #fff;
  border-radius: 14rpx;
  box-sizing: border-box;
  padding: 24rpx;
}
.header {
  color: #333333;
  font-size: 24rpx;
  margin-bottom: 20rpx;
  .title {
    font-size: 30rpx;
    font-weight: 500;
  }
  .yellow {
    color: #FBBF0D;
  }
}
.step {
  display: flex;
}
.step__left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-right: 16rpx;
}
.step__circle {
  width: 34rpx;
  height: 34rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  &.auto {
    height: auto;
  }
  .circle1 {
    width: 16rpx;
    height: 16rpx;
  }
  .circle2 {
    width: 34rpx;
    height: 34rpx;
  }
}
.step__line {
  width: 6rpx;
  flex: 1;
  overflow: hidden;
  background-color: #FBBF0D;
}
.step__right {
  font-size: 24rpx;
  color: #8E8E8E;
  line-height: 1.5;
  padding-bottom: 24rpx;
}
.step__time {
  margin-bottom: 12rpx;
}
</style>
